<template>
  <div class="company-list-1">
    <div class="header">重点帮扶养户</div>
    <div class="content">
      <el-table
        ref="myTable"
        :data="props.info"
        :row-style="{ height: '20px' }"
        :cell-style="{ padding: '0px' }"
        style="width: 100%; height: 180px"
        :header-cell-style="{ 'text-align': 'center' }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="rearer" width="50" label="养户" align="center" />
        <el-table-column prop="service" width="105" label="近3批平均上市率" align="center" />
        <el-table-column prop="count" width="105" label="近3批平均日增重" align="center" />
        <el-table-column prop="count" width="105" label="近3批平均料肉比" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  info: {
    type: Array,
    default: () => []
  }
})

// 斑马纹
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 == 0) {
    return ''
  } else {
    return 'warning-row'
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/table.css';

.company-list-1 {
  background-color: rgba(0, 0, 0, 0.1);
  width: 400px;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  font-size: 16px;

  .header {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    background: url('@/assets/task/u1289.png') no-repeat center top;
    display: flex;
    justify-content: center;
    line-height: 40px;
  }

  .content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: 10px;

    &-item1 {
      width: 150px;
      height: 150px;
      background-position: center, center;
      background-repeat: no-repeat, no-repeat;
      background-size: cover, cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &-title {
        line-height: 30px;
      }

      &-value {
        font-weight: bold;
        font-size: 24px;
      }
    }

    .bg-green {
      background-image: url('@/assets/green1.svg'), url('@/assets/green2.svg');
    }

    .bg-blue {
      background-image: url('@/assets/blue1.svg'), url('@/assets/blue2.svg');
    }

    .bg-orange {
      background-image: url('@/assets/orange1.svg'), url('@/assets/orange2.svg');
    }
  }
}
</style>
